<template>
  <div class="divisional">
    <!-- 品控分配数据页面 -->
    <div class="search_box">
      <el-row :gutter="20">
        <el-form
          :inline="true"
          :model="paramsInfo"
          class="demo-form-inline"
          ref="paramsForm"
        >
          <el-col :span="6">
            <el-form-item label="催收组" prop="roleId">
              <!--<el-input v-model.trim="paramsInfo.callRlolename" size="small"></el-input>-->
              <el-select
                  v-model.trim="paramsInfo.roleId"
                  size="small"
                  placeholder="请选择"
                  @change="getUserBugroup"
                >
                <el-option
                  v-for="item in groups"
                  :key="item.index"
                  :label="item.teamName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="催收人员" prop="userId">
              <!--<el-input v-model.trim="paramsInfo.callPeopleName" size="small"></el-input>-->
              <el-select
                v-model.trim="paramsInfo.userId"
                size="small"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in users"
                  :key="item.index"
                  :label="item.userName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户姓名" prop="name">
              <el-input v-model.trim="paramsInfo.name" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户证件号" prop="identificationNumber">
              <el-input
                v-model.trim="paramsInfo.identificationNumber"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" prop="">
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" prop="">
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" prop="">
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="small" @click="search" style="margin-left: 52px;"
            >查询</el-button>
            <el-button type="primary" size="small" @click="reset('paramsForm')"
            >重置</el-button>
          </el-col>
        </el-form>

      </el-row>
    </div>
    <div
      style="
        margin: 3px 3px 10px;
        font-size: 16px;
        font-size: 16px;
        cursor: pointer;
        width: 200px;
      "
    >
      <button style="cursor: pointer">
        <span id="wfpajs"
        ><el-button type="primary" size="small" @click="showUnAllot"
        >重新分配</el-button
        ></span
        >
      </button>
    </div>

    <el-table
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(212, 216, 206, 1)"
      :header-cell-style="{ background: 'LightYellow	', color: 'black' }"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChangeThree"
    >
      <el-table-column type="selection" checked="true"></el-table-column>
      <el-table-column
        label="序号"
        type="index"
        align="center"
        :index="getIndex"
      ></el-table-column>
      <el-table-column label="批次号" prop="batchNumber"></el-table-column>
      <el-table-column label="客户姓名" prop="name"></el-table-column>
      <el-table-column
        label="证件号"
        prop="identificationNumber"
        :formatter="hidInfo"
      ></el-table-column>

      <el-table-column label="逾期天数" prop="overdueDay"></el-table-column>
      <el-table-column label="逾期金额" prop="overdueArrears"></el-table-column>
      <el-table-column label="催收组" prop="roleName"></el-table-column>
      <el-table-column label="催收人员" prop="userName"></el-table-column>
      <el-table-column label="产品名称" prop="productName"></el-table-column>
    </el-table>
    <div class="pageBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog :visible.sync="unAllot" title="任务分配" width="40%">
      <div class="divisional">
        <div class="search_box" style="padding: 2px 10px">
          <el-row :gutter="20">
            <el-form
              :inline="true"
              :model="setInfo"
              class="demo-form-inline"
              ref="params3"
            >
              <el-col :span="8">
                <el-form-item label="催收组" prop="teamId">
                  <el-select
                    v-model.trim="setInfo.teamId"
                    size="small"
                    placeholder="请选择"
                    @change="changeUsers"
                  >
                    <el-option
                      v-for="item in groups"
                      :key="item.index"
                      :label="item.teamName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="组内人员" prop="userId">
                  <el-select
                    v-model.trim="setInfo.userId"
                    size="small"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in usersCopy"
                      :key="item.index"
                      :label="item.userName"
                      :value="item.userId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="margin-top: 37px">

              </el-col>
            </el-form>
          </el-row>
        </div>
      </div>
      <span slot="footer">
        <el-button
          type="primary"
          size="small"
          :disabled="
                    (setInfo.teamId == '') || (setInfo.userId == '')
                  "
          @click="saveAllot"
        >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { cmcUrl } from "../../../../static/baseUrl";
import { Message } from "element-ui";
export default {
  data() {
    return {
      setInfo: {
        userId: "",
        teamId: "",
        userName: "",
        teamName: "",
      },
      branchDisable: false,
      subBranchDisable: false,
      groups: [],
      users: [],
      usersCopy: [],
      subBranchOptions: [],
      paramsInfo: {
        roleId: "",
        userId: "",
        name: "",
        identificationNumber: "",
      },
      cardTypes: this.GLOBAL.cardTypeOptions,
      checkModelOptions: this.GLOBAL.checkModelOptions,
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      allotedParams: {
        name: "",
        cardNumber: "",
        serialNumber: "",
      }, //已分案查询条件
      showDetail: false,
      detailInfo: {},
      loading2: false,
      currentPage2: 1,
      pageSize2: 10,
      total2: 0,
      listData: [],
      //未分配案件页面参数
      unAllotNum: 0,
      unAllot: false,
      setCompany: false,
      roleName: "",
      userName: "",
      list3: [],
      loading3: false,
      currentPage3: 1,
      pageSize3: 10,
      total3: 0,
      companyOptions: [], //下发制定委外公司的下拉选
      companyName: "",
      selectedData: [],
      checkedIds: "",
      excelTitle: [
        "批次号",
        "案件流水号",
        "姓名",
        "身份证号",
        "卡号",
        "卡类型",
        "贷款合同号",
        "开户机构",
        "逾期欠款",
        "逾期期数",
        "支行机构编码",
        "分行机构编码",
      ], //导出excel的表头，与excelColumn，需一一对应
      excelColumn: [
        "batchNumber",
        "serialNumber",
        "name",
        "identificationNumber",
        "cardNumber",
        "allowType",
        "contractNumber",
        "accountOpeningInstitution",
        "overdueArrears",
        "numberOfOverduePeriods",
        "zhiInstitution",
        "fenInstitution",
      ], //导出excel每列对应的数据，
    };
  },
  created() {
    this.getGroupQua();
    this.checkInfo();
  },
  methods: {
    //获取所有品控组
    getGroupQua() {
      this.$axios({
        method: "post",
        url: `/CMC/api/tbCall/selectGroup`,
        data: "",
      })
        .then((res) => {
          console.log("获取品控数据==", res);
          if (res.code == 200) {
            this.groups = res.data;
          } else {
            console.error("获取品控出错，，", res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //根据品控组获取用户列表
    getUserBugroup() {
      if (this.paramsInfo.roleId) {
        this.paramsInfo.userId = "";
        let options = {
          teamId: this.paramsInfo.roleId,
        }
        this.$axios({
          method: "post",
          url: `/CMC/api/tbCall/selectPerson`,
          data: options,
        })
          .then((res) => {
            if (res.code == 200) {
              this.users = res.data;
            } else {
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    changeUsers(){
      if (this.setInfo.teamId) {
        // this.setInfo.userId = "";
        this.$set(this.setInfo, 'userId', '')
        let options = {
          teamId: this.setInfo.teamId,
        }
        this.$axios({
          method: "post",
          url: `/CMC/api/tbCall/selectPerson`,
          data: options,
        })
          .then((res) => {
            if (res.code == 200) {
              this.usersCopy = res.data;
            } else {
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    cardTypeToZN(row, column, cellValue, index) {
      let ttt = this.cardTypes.find((element) => element.value == cellValue);

      return ttt ? ttt.label : "";
    },
    handleCurrentChange(data) {
      this.currentPage = data;
      this.checkInfo();
    },
    handleSizeChange(data) {
      this.pageSize = data;
      this.checkInfo();
    },
    handleCurrentChange2(data) {
      this.currentPage2 = data;
      this.allotedList();
    },
    handleSizeChange2(data) {
      this.pageSize2 = data;
      this.allotedList();
    },
    handleCurrentChange3(data) {
      this.currentPage3 = data;
      this.getList3();
    },
    handleSizeChange3(data) {
      this.pageSize3 = data;
      this.getList3();
    },
    formatCheckModel(row) {
      let vv = row.checkModel;
      let ttt = this.checkModelOptions.find((element) => element.value == vv);
      return ttt ? ttt.label : "";
    },
    getIndex(index) {
      index = index + 1 + (this.currentPage - 1) * this.pageSize;
      return index;
    },
    getIndex2(index) {
      index = index + 1 + (this.currentPage2 - 1) * this.pageSize2;
      return index;
    },
    getIndex3(index) {
      index = index + 1 + (this.currentPage2 - 1) * this.pageSize2;
      return index;
    },
    search() {
      this.currentPage = 1;
      this.checkInfo();
    },
    reset(formRef) {
      this.$refs[formRef].resetFields();
    },
    //主页面列表数据
    checkInfo() {
      this.$set(this.paramsInfo, "pageNum", this.currentPage);
      this.$set(this.paramsInfo, "pageSize", this.pageSize);
      this.loading = true;
      this.$axios({
        method: "post",
        url: `/CMC/api/tbCall/selectCollectGroupData`,
        params: this.paramsInfo,
        headers:{'Content-Type':'application/x-www-form-urlencoded'},
      })
        .then((res) => {
          this.loading = false;
          console.log(res, "数据详情");
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = Number(res.data.total);
          } else {
            console.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //详情
    detail(row) {
      this.allotedParams = JSON.parse(JSON.stringify(row));
      console.log("this.allotedParams==", this.allotedParams);
      this.showDetail = true;
      this.search2();
    },

    showUnAllot() {
      if (this.selectedData && this.selectedData.length > 0) {
        this.unAllot = true;
        this.setInfo=[];
        this.getGroupQua();
      } else {
        Message.warning("请选中数据后操作！");
        return;
      }
    },

    handleSelectionChangeThree(val) {
      this.selectedData = val;
      console.log("this.checkedIds,,", this.checkedIds);
    },
    saveAllot() {
      if (this.setInfo.teamId == "") {
        Message.warning("请选催收组");
        return;
      }
      if (this.setInfo.userId == "") {
        Message.warning("请选定催收人员");
        return;
      }
      let group = this.groups.find(
        (item) => item.id == this.setInfo.teamId
      );
      let team = {
        teamId: group.id,
        teamName: group.teamName,
      }
      let user = this.usersCopy.find((item) => item.userId == this.setInfo.userId);
      let datas = [];
      this.selectedData.forEach((item) => {
        datas.push(item.id);
      });
      let options = {
        ids: datas.join(","),
        ...team,
        ...user
      };
      console.log("options==", options);
      this.$axios({
        method: "post",
        url: `/CMC/api/tbCall/updateCollectGroupData`,
        data: options,
      })
        .then((res) => {
          if (res.code == 200) {
            Message.success("操作成功！");
            this.unAllot = false;
            this.checkInfo();
          } else {
            console.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.divisional {
  .search_box {
    background: #fff;
    border-radius: 10px;
    padding: 40px 40px 25px 40px;
    margin: 0 0 20px 0;
  }

  .pageBox {
    display: flex;
    width: 100%;
    justify-content: left;
    margin-top: 10px;
  }

  /deep/ .el-dialog {
    .mainInfoBox {
      width: 100%;
      max-height: 60vh;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      overflow-y: auto;

      .infoBox {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 30%;

        label {
          width: 100px;

          margin-right: 5px;
        }

        .el-input {
          flex: 1 1 auto;
        }
      }
    }
  }
}
</style>
